<template>
  <div class="searchView">
    <header>
      <div class="toSearching" @click="toSearching">
        <svg
          t="1677415686915"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6270"
          width="16"
          height="16"
        >
          <path
            d="M769.322667 708.992l182.741333 182.698667-60.373333 60.373333-182.698667-182.741333A382.293333 382.293333 0 0 1 469.333333 853.333333c-211.968 0-384-172.032-384-384s172.032-384 384-384 384 172.032 384 384a382.293333 382.293333 0 0 1-84.010666 239.658667z m-85.589334-31.658667A297.685333 297.685333 0 0 0 768 469.333333c0-165.034667-133.674667-298.666667-298.666667-298.666666-165.034667 0-298.666667 133.632-298.666666 298.666666 0 164.992 133.632 298.666667 298.666666 298.666667a297.685333 297.685333 0 0 0 208-84.266667l6.4-6.4z"
            fill="#999999"
            p-id="6271"
          ></path>
        </svg>
        <input type="text" placeholder="请输入作品名，创作人" readonly />
      </div>
    </header>
    <SearchBanner :banners="banners" />
    <SearchRecommend :recommend="recommended_position" />
    <SearchCategorie :categories="categories" />
  </div>
</template>

<script>
import SearchBanner from "@/components/SearchBanner.vue";
import SearchRecommend from "@/components/SearchRecommend.vue";
import SearchCategorie from "@/components/SearchCategorie.vue";

export default {
  components: {
    SearchBanner,
    SearchRecommend,
    SearchCategorie,
  },
  data() {
    return {
      banners: null,
      recommended_position: null,
      categories: null,
    };
  },
  created() {
    this.$toast.loading({
      message: "加载中...",
      forbidClick: true,
      duration: 0,
    });
    this.$axios
      .get(`/searchView.json`)
      // .get(`https://apis.netstart.cn/xpc/page/discovery`)
      .then((res) => {
        // console.log(res.data.data);
        let result = res.data.data;
        this.banners = result.banners;
        this.recommended_position = result.recommended_position;
        this.categories = result.categories;
        this.$toast.clear();
      });
  },
  methods: {
    toSearching() {
      // console.log("toSearching");
      this.$router.push({ path: "/searching" });
    },
  },
};
</script>

<style lang="scss" scoped>
.searchView {
  padding-top: 50px;

  header {
    height: 50px;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid #f2f2f2;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;

    .toSearching {
      width: 345px;
      background-color: #f0f0f0;
      border-radius: 5px;
      height: 36px;
      display: flex;
      align-items: center;

      .icon {
        margin-left: 14px;
        margin-right: 7px;
        width: 22px;
        height: 22px;
      }

      input {
        background: none;
        outline: none;
        // border: 1px solid #ccc;
        border: none;
        padding: 0;
        font-size: 14px;
        color: #999;
      }

      input:focus {
        border: none;
      }
    }
  }
}
</style>
